<template>
	<view class="body">
		<u-navbar :title="title" :background="{ background: '#ffd5cc' }" :autoBack="true"></u-navbar>

		<view class="Search-u">
			<Search pageTitle="搜索" placeholder="快搜索你想要的商品吧~" color="#F05A39" @search="searchStore" @clear="clear"></Search>
		</view>

		<view class="pr-backround app-bottom">
			<view v-if="loading" class="add-load">
				<u-loading mode="flower"></u-loading>
			</view>

			<view v-else-if="productList.length != 0">
				<ProductList :productList="productList"></ProductList>
				<loadMore :currentLength="productList.length" :total="total" :pageSize="pageSize" @load-list="getFriendsPage()" ref="loadArray" @load-add="pageNum++"></loadMore>
			</view>

			<u-empty v-else icon-size="400" src="/static/main/image2x.png"></u-empty>
		</view>
	</view>
</template>

<script>
import Search from '@/components/you-search/index.vue';
import ProductList from '@/components/produc-list/index.vue';
import main from '@/api/main.js';
import loadMore from '@/components/load-more/load-more.vue';
export default {
	components: {
		Search,
		ProductList,
		loadMore
	},
	data() {
		return {
			productList: [],
			title: '',
			loading: false,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			catId: 0,
			searchName: '',
			goodType: ''
		};
	},
	onLoad(o) {
		this.productList = [];
		if (o.goodType) {
			this.goodType = o.goodType;
			this.getArray();
		}
	},
	onShow() {},
	onReachBottom() {
		if (this.total > this.pageNum * this.pageSize) {
			this.pageNum++;
			this.$refs.loadArray.loadMore();
		}
	},
	methods: {
		clear() {
			this.searchName = '';
			this.productList = [];
			if (this.goodType != '') {
				this.getArray();
			}
		},
		searchStore(searchValue) {
			if (!searchValue) {
				return;
			}
			this.searchName = searchValue;
			this.getArray();
		},
		getArray() {
			let _this = this;
			_this.loading = true;
			console.log(this.goodType);
			if (this.goodType != '') {
				main.getSubsidyByArray({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					goodName: _this.searchName,
					goodType: this.goodType
				})
					.then((res) => {
						_this.productList = res.rows;
						_this.loading = false;
						_this.total = res.total;
					})
					.catch((erro) => {
						console.log(erro);
					});
			} else {
				main.getGood({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					goodName: _this.searchName,
					isShowAl: 1
				})
					.then((res) => {
						_this.productList = res.rows;
						_this.loading = false;
						_this.total = res.total;
					})
					.catch((erro) => {
						console.log(erro);
					});
			}
		},
		getFriendsPage() {
			let _this = this;
			if (this.goodType != -1) {
				main.getSubsidyByArray({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					goodName: _this.searchName,
					goodType: _this.goodType
				})
					.then((res) => {
						_this.productList = [..._this.productList, ...res.rows];
						_this.total = data.total;
					})
					.catch((erro) => {
						console.log(erro);
					});
			} else {
				main.getGood({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					goodName: _this.searchName
				})
					.then((res) => {
						_this.productList = [..._this.productList, ...res.rows];
						_this.total = data.total;
					})
					.catch((erro) => {
						console.log(erro);
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	background-color: #ffd5cc;
	width: 100%;
	min-height: 100vh;
}

.Search-u {
	margin: 0 0 20rpx 0;
}
.pr-backround {
	background-color: #f8f8f8;
	border-radius: 25rpx 25rpx 0 0;
	min-height: calc(100vh - 84px - 20rpx);
}
</style>
